<template>
      <!-- label-width="68px" -->
    <div class="app-container">
        <!-- 搜索框 -->
        <el-form 
        :model="queryParams" 
        ref="queryRef" 
        :inline="true" 
        v-show="showSearch" 
        label-width="68px"
        >

            <el-form-item style="width: 250px;" label="比赛名称" prop="gameName">
                <el-input v-model="queryParams.gameName" placeholder="请输入比赛名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item style="width: 250px;" label="证书名称" prop="certificateName">
                <el-input v-model="queryParams.certificateName" placeholder="请输入证书名称" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item style="width: 250px;" label="赛事类别" prop="gameType">
                <el-select v-model="queryParams.gameType" placeholder="请选择赛事类别" clearable>
                    <el-option v-for="dict in znl_game_type" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="width: 250px;" label="获奖级别" prop="certificateRank">
                <el-select v-model="queryParams.certificateRank" placeholder="请选择获奖级别" clearable>
                    <el-option v-for="dict in znl_certificate_rank" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="width: 250px;" label="证书类型" prop="certificateType">
                <el-select v-model="queryParams.certificateType" placeholder="请选择证书类型" clearable>
                    <el-option v-for="dict in znl_certificate_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="width: 250px;" label="证书编号" prop="certificateNumber">
                <el-input v-model="queryParams.certificateNumber" placeholder="请输入证书编号" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item style="width: 250px;" label="颁奖单位" prop="prizeGiving">
                <el-input v-model="queryParams.prizeGiving" placeholder="请输入颁奖单位" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="获奖时间" style="width: 250px;font-weight: bold">
                <el-date-picker v-model="daterangeAcquisitionTime" value-format="YYYY-MM-DD" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>

            <el-form-item style="width: 250px;" label="参赛成员" prop="gameMember">
                <el-input v-model="queryParams.gameMember" placeholder="请输入参赛成员" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item style="width: 250px;" label="所属学院" prop="gameStudentCollege">
                <el-input v-model="queryParams.gameStudentCollege" placeholder="请输入所属学院" clearable
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item style="width: 250px;" label="老师名字" prop="guideTeacher">
                <el-input v-model="queryParams.guideTeacher" placeholder="请输入老师名字" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item style="width: 250px;" label="作品名称" prop="productionName">
                <el-input v-model="queryParams.productionName" placeholder="请输入作品名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item style="width: 250px;" label="参赛地址" prop="gameAddress">
                <el-input v-model="queryParams.gameAddress" placeholder="请输入参赛地址" clearable @keyup.enter="handleQuery" />
            </el-form-item>
        
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 功能菜单栏 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd"
                    v-hasPermi="['commendation:info:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['commendation:info:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
                    v-hasPermi="['commendation:info:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button color="#626aef" plain icon="Download" @click="handleImport"
                    v-hasPermi="['commendation:info:import']">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="upload" @click="handleExport"
                    v-hasPermi="['commendation:info:export']">导出</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <div class="elm-scroll">
            <!-- 正文内容 -->
            <el-table stripe border v-loading="loading" :data="infoList" height="500"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="" align="center" prop="id" v-if="false" />
                <el-table-column label="比赛名称" align="center" prop="gameName" :show-overflow-tooltip="true" />
                <el-table-column label="证书名称" align="center" prop="certificateName" :show-overflow-tooltip="true" />

                <el-table-column label="赛事类别" align="center" prop="gameType">
                    <template #default="scope">
                        <dict-tag :options="znl_game_type" :value="scope.row.gameType" />
                    </template>
                </el-table-column>
                <el-table-column label="获奖级别" align="center" prop="certificateRank">
                    <template #default="scope">
                        <dict-tag :options="znl_certificate_rank" :value="scope.row.certificateRank" />
                    </template>
                </el-table-column>
                <el-table-column label="证书类型" align="center" width="200" prop="certificateType">
                    <template #default="scope">
                        <dict-tag :options="znl_certificate_type" :value="scope.row.certificateType" />
                    </template>
                </el-table-column>
                <el-table-column label="证书正面" align="center" width="150">
                    <template #default="{ row }">
                        <div class="demo-image__preview">
                            <el-image style="width: 70px; height: 60px" :src="row.certificateFront" :zoom-rate="1.2"
                                :max-scale="7" :min-scale="0.2" :preview-teleported="true" :lazy="true"
                                :close-on-press-escape="true" :preview-src-list="[row.certificateFront]" :initial-index="1"
                                fit="cover" />
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="证书反面" align="center" width="150">
                    <template #default="{ row }">
                        <div class="demo-image__preview">
                            <el-image style="width: 70px; height: 60px" :src="row.certificateReverse" :zoom-rate="1.2"
                                :max-scale="7" :min-scale="0.2" :preview-teleported="true" :lazy="true"
                                :close-on-press-escape="true" :preview-src-list="[row.certificateReverse]"
                                :initial-index="1" fit="cover" />
                        </div>
                    </template>

                </el-table-column>
                <el-table-column label="获奖时间" align="center" sortable prop="acquisitionTime" width="180">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.acquisitionTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="颁奖单位" align="center" prop="prizeGiving" :show-overflow-tooltip="true" />
                <el-table-column label="作品名称" align="center" prop="productionName" :show-overflow-tooltip="true" />
                <el-table-column label="证书编号" align="center" prop="certificateNumber" :show-overflow-tooltip="true" />

                <el-table-column label="参赛成员" align="center" prop="gameMember" :show-overflow-tooltip="true" />

                <el-table-column label="参赛人员学号" align="center" prop="gameStudentNumber" :show-overflow-tooltip="true" />

                <el-table-column label="所属学院" align="center" prop="gameStudentCollege" :show-overflow-tooltip="true" />

                <el-table-column label="老师名字" align="center" prop="guideTeacher" :show-overflow-tooltip="true" />

                <el-table-column label="参赛总结" align="center" prop="gameSummary" :show-overflow-tooltip="true" />

                <el-table-column label="参赛材料" align="center" prop="gameMaterials" :show-overflow-tooltip="true" />

                <el-table-column label="参赛地址" align="center" prop="gameAddress" :show-overflow-tooltip="true" />

                <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />

                <el-table-column label="操作" align="center" fixed="right" width="220" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button type="primary" plain icon="Edit" @click="handleUpdate(scope.row)"
                            v-hasPermi="['commendation:info:edit']">修改</el-button>
                        <el-button type="danger" plain icon="Delete" @click="handleDelete(scope.row)"
                            v-hasPermi="['commendation:info:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 数据初始化 -->
        <pagination v-show="true" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
            @pagination="getList" />

        <!-- <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    /> -->


        <!-- 添加或修改证书信息管理对话框 -->
        <el-dialog :title="title" v-model="open" width="500px" append-to-body>
            <el-form ref="infoRef" :model="form" :rules="rules" label-width="80px">

                <el-row>
                    <el-col :span="12">

                        <el-form-item label="比赛名称" prop="gameName">
                            <el-input v-model="form.gameName" placeholder="请输入比赛名称" clearable @keyup.enter="handleQuery" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="证书名称" prop="certificateName">
                            <el-input v-model="form.certificateName" placeholder="请输入证书名称" clearable
                                @keyup.enter="handleQuery" />
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="12">

                        <el-form-item label="赛事类别" prop="gameType">
                            <el-select v-model="form.gameType" placeholder="请选择赛事类别">
                                <el-option v-for="dict in znl_game_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="获奖级别" prop="certificateRank">
                            <el-select v-model="form.certificateRank" placeholder="请选择获奖级别">
                                <el-option v-for="dict in znl_certificate_rank" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="12">
                        <el-form-item label="证书类型" prop="certificateType">
                            <el-select v-model="form.certificateType" placeholder="请选择证书类型">
                                <el-option v-for="dict in znl_certificate_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="获奖时间" prop="acquisitionTime">
                            <el-date-picker clearable v-model="form.acquisitionTime" type="date" value-format="YYYY-MM-DD"
                                placeholder="选择获奖时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>


                <!-- <el-form-item label="证书正面" prop="certificateFront">
                    <el-input v-model="form.certificateFront" placeholder="请输入证书正面" />
                </el-form-item> -->
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="证书正面" prop="certificateFront">
                            <div class="demo-image__preview">
                                <el-image style="width: 100px; height: 100px" :src="form.certificateFront" :zoom-rate="1.2"
                                    :preview-teleported="true" :lazy="true" :close-on-press-escape="true" :max-scale="7"
                                    :min-scale="0.2" :preview-src-list="[form.certificateFront]" :initial-index="1"
                                    fit="cover" />
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="80px" label="选择证书正面图片">
                            <image-file v-model="form.certificateFront" :buttonString="buttonStringFront"
                                ref="imageFileFrontRef" @update:modelValue="certificateFrontUrl"></image-file>
                        </el-form-item>
                    </el-col>
                </el-row>


                <el-row>
                    <el-col :span="12">
                        <el-form-item label="证书反面" prop="certificateReverse">
                            <div class="demo-image__preview">
                                <el-image style="width: 100px; height: 100px" :src="form.certificateReverse"
                                    :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-teleported="true" :lazy="true"
                                    :close-on-press-escape="true" :preview-src-list="[form.certificateReverse]"
                                    :initial-index="1" fit="cover" />
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label-width="80px" label="选择证书反面图片">
                            <image-file v-model="form.certificateReverseRef" ref="imageFileReverseRef"
                                :buttonString="buttonStringRevers" @update:modelValue="certificateReverseUrl"></image-file>
                        </el-form-item>
                    </el-col>

                </el-row>
                <!-- <el-form-item label="证书反面" prop="certificateReverse">
                    <el-input v-model="form.certificateReverse" placeholder="请输入证书反面" />
                </el-form-item> -->

                <el-form-item label="颁奖单位" prop="prizeGiving">
                    <el-input v-model="form.prizeGiving" placeholder="请输入颁奖单位" />
                </el-form-item>
                <el-form-item label="参赛地址" prop="gameAddress">
                    <el-input v-model="form.gameAddress" placeholder="请输入参赛地址" />
                </el-form-item>
                <el-form-item label="作品名称" prop="productionName">
                    <el-input v-model="form.productionName" placeholder="请输入作品名称" />
                </el-form-item>
                <el-form-item label="证书编号" prop="certificateNumber">
                    <el-input v-model="form.certificateNumber" placeholder="请输入证书编号" />
                </el-form-item>
                <el-form-item label="参赛成员" prop="gameMember">
                    <el-input v-model="form.gameMember" placeholder="请输入参赛成员" />
                </el-form-item>
                <el-form-item label="人员学号" prop="gameStudentNumber">
                    <el-input v-model="form.gameStudentNumber" placeholder="请输入参赛人员学号" />
                </el-form-item>
                <el-form-item label="所属学院" prop="gameStudentCollege">
                    <el-input v-model="form.gameStudentCollege" placeholder="请输入所属学院" />
                </el-form-item>
                <el-form-item label="老师名字" prop="guideTeacher">
                    <el-input v-model="form.guideTeacher" placeholder="请输入老师名字" />
                </el-form-item>

                <el-form-item label="参赛总结" prop="gameSummary">
                    <el-input v-model="form.gameSummary" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="参赛材料" prop="gameMaterials">
                    <el-input v-model="form.gameMaterials" type="textarea" placeholder="请输入内容" />
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>



            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>



        <!-- 证书信息导入对话框 -->
        <div>
            <element-file-upload
            @get:List="getList"
            ref = "fileUploadRef"
            >

            </element-file-upload>
        </div>

    </div>
</template>
  
<script lang='ts' setup name="Info">


import ImageFile from "@/views/commendation/ImageUpload/index.vue";
import ElementFileUpload from "@/views/commendation/ElementFileUpload/index.vue";
import { listInfo, getInfo, delInfo, addInfo, updateInfo, exportInfoIds } from "@/api/commendation/info";
import { ref, getCurrentInstance, reactive, toRefs, onMounted } from "vue";
const { proxy } = getCurrentInstance() as any;
const { znl_certificate_type, znl_game_type, znl_certificate_rank } = proxy.useDict('znl_certificate_type', 'znl_game_type', 'znl_certificate_rank');

const fileUploadRef = ref<InstanceType<typeof ElementFileUpload>>();

const excelFileUploadReq = {
    open: true,
    title: '证书信息导入'
}
function handleImport() {
    excelFileUploadReq.open = true;
    fileUploadRef.value?.setUpload(excelFileUploadReq);
}

// 证书正反面子组件
const imageFileFrontRef = ref()
const imageFileReverseRef = ref()

function certificateFrontUrl(url: any) {
    form.value.certificateFront = url;

}

function certificateReverseUrl(url: any) {
    form.value.certificateReverse = url;
}
const buttonStringFront = ref<string>("选择证书正面")
const buttonStringRevers = ref<string>("选择证书反面")


const infoList = ref<any>([]);
const open = ref<boolean>(false);
const loading = ref<boolean>(true);
const showSearch = ref<boolean>(true);
const ids = ref<any>([]);
const certificateName = ref<any>([]);
const single = ref<boolean>(true);
const multiple = ref<boolean>(true);
const total = ref<number>(0);
const title = ref<string>("");
const daterangeAcquisitionTime = ref<any>([]);
const form = ref<any>();
const data = reactive({
    form: {

    },
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        gameName: undefined, gameType: undefined, certificateName: undefined, certificateType: undefined, certificateNumber: undefined, prizeGiving: undefined, acquisitionTime: undefined, certificateRank: undefined, gameMember: undefined, gameStudentCollege: undefined, guideTeacher: undefined, productionName: undefined, gameAddress: undefined,
    },
    rules: {
        gameName: [
            { required: true, message: "比赛名称不能为空", trigger: "blur" }
        ],
        certificateName: [
            { required: true, message: "证书名称不能为空", trigger: "blur" }
        ],
        gameType: [
            { required: true, message: "赛事类别不能为空", trigger: "change" }
        ],
        certificateType: [
            { required: true, message: "证书类型不能为空", trigger: "change" }
        ],
        certificateRank: [
            { required: true, message: "获奖级别不能为空", trigger: "change" }
        ],
        productionName: [
            { required: true, message: "作品名称不能为空", trigger: "blur" }
        ]
    }
});

const { queryParams, rules } = toRefs(data);


/** 查询证书信息管理列表 */
function getList() {
    loading.value = true;
    infoList.value = [];

    listInfo(proxy.addDateRange(queryParams.value, daterangeAcquisitionTime.value)).then((response: any) => {
        infoList.value = response.rows;
        total.value = Number(response.total);
        loading.value = false;
    });

}


// 取消按钮
function cancel() {
    open.value = false;
    imageRemove();
    reset();
}

// 移除照片
function imageRemove() {
    imageFileFrontRef.value?.handleRemove();
    imageFileReverseRef.value?.handleRemove();
}

import { ElForm, ElTable, ElUpload, FormItemRule } from "element-plus";
const infoRef = ref<InstanceType<typeof ElForm>>();
// 表单重置
function reset() {
    imageRemove();
    // imageFile
    form.value = {
        id: null, gameName: null, gameType: null, certificateName: null, certificateType: null, certificateNumber: null, prizeGiving: null, acquisitionTime: null, certificateRank: null, gameMember: null, gameStudentNumber: null, gameStudentCollege: null, guideTeacher: null, productionName: null, gameSummary: null, gameMaterials: null, gameAddress: null, certificateFront: null, certificateReverse: null, createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null
    };
    proxy.resetForm("infoRef");
    infoRef.value?.resetFields();
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    daterangeAcquisitionTime.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection: { map: (arg0: (item: any) => any) => never[]; length: number; }) {
    ids.value = selection.map((item: { id: any; }) => item.id);
    certificateName.value = selection.map((item: { certificateName: any; }) => item.certificateName);
    single.value = selection.length !== 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = "添加证书信息管理";
}

/** 修改按钮操作 */
function handleUpdate(row: any) {
    reset();
    const id = row.id || ids.value
    getInfo(id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = "修改证书信息管理";
    });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs["infoRef"].validate((valid: any) => {
        if (valid) {
            if (form.value.id != null) {
                updateInfo(form.value).then(response => {
                    proxy.$modal.msgSuccess("修改成功");
                    open.value = false;
                    getList();
                });
            } else {
                addInfo(form.value).then(response => {
                    proxy.$modal.msgSuccess("新增成功");
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row: any) {
    const Infoids = row.id || ids.value;
    const name = row.certificateName || certificateName.value;
    proxy.$modal.confirm('是否确认删除证书名称为:"' + name + '"的数据项？').then(function () {
        return delInfo(Infoids);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}

/** 导出按钮操作 */
function handleExport(row: any) {

    const Infoids = row.id || ids.value;

    if (!Infoids || Infoids.length === 0) {
        proxy.$modal.confirm('确认导出所有的数据项？').then(function () {
            proxy.download('commendation/info/exportByStream', {
                ...queryParams.value
            }, `证书信息_${new Date().getTime()}.xlsx`)
        }).then(() => {
            getList();
            proxy.$modal.msgSuccess("证书信息导出成功");
        }).catch(() => { });


    } else {

        proxy.$modal.confirm('确认导出选中的:' + Infoids.length + '条数据项？').then(function () {
            console.log("Infoids=====" + Infoids);
            proxy.download('commendation/info/exportIds', {
                ids: Infoids
            }, `证书信息_${new Date().getTime()}.xlsx`)
        }).then(() => {
            getList();
            proxy.$modal.msgSuccess("证书信息导出成功");
        }).catch(() => { });
    }

}

getList();

</script>


<style scoped>
/* 专门element plus修改表格横向滚动条的粗细 */
.elm-scroll :deep(.el-scrollbar__bar.is-horizontal) {
    height: 10px !important;
}

/* 专门修改element plus 竖向滚动条粗细 */
.elm-scroll :deep(.el-scrollbar__bar.is-vertical) {
    width: 10px !important;
}
</style>

